{#include file="top.php"#}
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />
<script src="/js/jquery.Jcrop.js"></script>
<script>
    var click_brand=0;
    function selectcheckbox(aid,divid){
        var selectvar="";
        var brandselect = "";
        var productsbrandsnum=0;

        $("#"+divid).attr("style","visibility:hidden;");
        click_brand = 0;

        $("#"+divid+" input").each(function(i){
            if($(this).attr("checked")==true && $(this).attr("disabled")!=true){
                productsbrandsnum+=1;
                selectvar+=$(this).attr("brand_name")+",";
                brandselect+=$(this).val()+",";
                
            }
        });
        if(productsbrandsnum>0){
            selectvar=selectvar.substring(0,selectvar.length-1);
            brandselect=brandselect.substring(0,brandselect.length-1);
            $("#"+aid).html(selectvar);
            $("#"+aid+'_val').val(brandselect);
        }else{
            $("#"+aid).html("Please Select");
        }
    }
    function toggle_brand_form(){
        if(click_brand==0){
            $("#brand_form").attr("style","visibility:visible;");            
            click_brand = 1;
        }else{
            $("#brand_form").attr("style","visibility:hidden;");
            selectcheckbox('brand_a','brand_form');
            click_brand = 0;
        }
        
        
    }
</script>

<div class="body">
    <div class="main">
        <form id="register_form" enctype="multipart/form-data" action="member.php?action=regExpert" method="POST">
            <div class="reg_step_box" ></div>

            <div class="exp_team b_box">
                <div class="hd">
                    <h2 class="hd_title">體驗專隊</h2>
                </div>
                <div class="bd">
                    <p class="c_title">
                        填寫所須資料註冊後，必須經編輯內部審核，才能正式成為〈體驗達人〉，參與各大品牌體驗活動。
                    </p>
                    <table border="0" cellspacing="0" cellpadding="0" class="try_tb">

                       
                        <tr>
                            <th>網誌連結<span class="span_pink">*</span>：</th><td>
                                <input class="try_ipt_text" onclick="$('#homepage_err').hide();" onchange="$('#homepage_err').hide();" onblur="$('#homepage_err').hide();" onkeydown="$('#homepage_err').hide();" name="homepage" id="homepage" value="{#$layout.member.homepage#}" /></td>
                        </tr> <tr><th></th><td>只要簡單幾個步驟，即可批核成為體驗達人，盡享星級產品體驗。
                                <br>
                                第 1 步： 請於個人美容部落格發一篇名為「我要成為 iTrial 體驗達人」的文章，並在文章內輸入以下驗証碼
                                <br>
                                第 2 步：請提供該篇網誌之連結然後發送
                                <br>

                                驗證碼：{#$layout.member.code#}</td></tr>
                        <tr>
                            <th></th><td><p class="tip" id="homepage_err" style="display:none;">
                                    <em class="hack"></em>
                                    <a class="close"> close </a>
                                    {#$HAS_HOMEPAGE#}
                                </p></td>
                        </tr>
                        <!--
                        <tr>
                                <th>快速審核驗證：</th><td>
                                <input type="text" class="try_ipt_text"  name="blogPage" value="{#$layout.member.blogPage#}" />
                        </tr>
                        <tr>
                                <th></th><td>
                                <p class="tip">
                                        <em class="hack"></em>
                                         <a class="close" href="#"> close </a>
                                        請於個人部落格內發表一篇包含此驗証碼 {#$layout.member.code#} 之文章，代表閣下擁有該部落客。
                                </p></td>
                        </tr>
                        -->

                        <tr>
                            <th>試用評鑑報告：</th><td>
                                <input type="text" class="try_ipt_text" name="reportURL" value="{#$layout.member.reportURL#}"/></td> 
                        </tr>
                        <tr>
                            <th></th><td>
                                <p class="tip">
                                    <em class="hack"></em>
                                    <!--<a class="close" href="#"> close </a>-->
                                    請提供閣下曾於「試用專區」內填寫之試用評鑑報告連結，提高成功被審核機會。
                                </p></td>
                        </tr>

                        <tr>
                            <th>最喜愛的美容品牌<span class="span_pink">*</span>：</th><td>
                                <a class="experience_group_slt" href="###" onclick="toggle_brand_form();$('#brand_err').hide();" id="brand_a">Please Select</a>
                            </td>
                        </tr>
                        <tr>
                            <th></th><td><p class="tip" id="brand_err" style="display:none;">
                                    <em class="hack"></em>
                                    <a class="close"> close </a>
                                    {#$HAS_BRAND#}
                                </p></td>
                        </tr>
                        <tr>
                            <th>最關注皮膚問題<span class="span_pink">*</span>：</th><td>
                                <ul class="option_list">
                                    {#foreach from=$layout.question item=value key=key#}
                                    <li class="option"><input type="checkbox" name="question[]" {#if in_array($value.id,$layout.member.question)#}checked="checked"{#/if#} onclick="$('#question_err').hide();"  value="{#$value.id#}">{#$value.cname#} </li>
                                    {#/foreach#}
                                </ul></td>
                        </tr>
                        <tr>
                            <th></th><td><p class="tip" id="question_err" style="display:none;">
                                    <em class="hack"></em>
                                    <a class="close"> close </a>
                                    {#$HAS_QUESTION#}
                                </p></td>
                        </tr>
                        <tr>
                            <th>個人興趣<span class="span_pink">*</span>：</th><td>
                                <ul class="option_list">
                                    {#foreach from=$layout.interest item=value key=key#}
                                    <li class="option"><input type="checkbox" name="interest[]"   {#if in_array($value.id,$layout.member.interest)#}checked="checked"{#/if#}  onclick="$('#interest_err').hide();"  value="{#$value.id#}">{#$value.cname#} </li>
                                    {#/foreach#}
                                </ul></td>
                        </tr>
                        <tr>
                            <th></th><td><p class="tip"  id="interest_err" style="display:none;">
                                    <em class="hack"></em>
                                    <a class="close"> close </a>
                                    {#$HAS_INTEREST#}
                                </p></td>
                        </tr>
                        <tr>
                            <th>個人半身近照<span class="span_pink">*</span>：</th><td class="upload_td">
                                <div class="filebox">
                                    <div class="img_box" id="avatar_thumbnail">
                                        <img src="{#if $layout.member.photo#}{#$layout.member.photo#}{#else#}data/p84x84.jpg{#/if#}" width=84 height="84">
                                    </div>
                                    <a class="btn_s btn_s_upload sfile" style="cursor:pointer"> <strong>選擇檔案</strong><input type="file" class="file_upload" id="avatar_file" style="cursor:pointer"></a>

                                    <input type="hidden" id="avatar" name="photo" value="{#$layout.member.photo#}">

                                </div></td>
                        </tr>
                        <tr>
                            <th></th><td>
                                <p class="tip" style="display:none;"  id="avatar_file_tip">
                                    <em class="hack"></em>
                                    <a class="close"> close </a>
                                    <span id="avatar_file_tip_text"><span id="avatar_file_tip_text">{#$HAS_INVITE_PIC#}</span>
                                </p></td>
                        </tr>
                    </table>

                </div>





                <!--hidden-->
                <input type="hidden" name="issubmit" value="1" />
                <input type="hidden" name="brand_val" value="{#implode(',',$layout.member.brand)#}" id="brand_a_val" />
                <a style="cursor:pointer" onclick="submit_form()" class="btn_s btn_s_next"><strong>下一步</strong></a> <a href="{#$this->selfurl#}?action=regSucceed&toURL={#$toURL#}" class="btn_s btn_s_ignore"><strong>略過</strong></a>
            </div>


        </form>
    </div>




    <!-- main-->
    <div class="sidebar">
        {#show_block('b2',1,'','sidebar_ad')#}
        {#show_block('b1',2,'','sidebar_function')#}
        {#show_block('b3',0,'','sidebar_search')#}
        {#show_block('b4',0,'','sidebar_workshop')#}
        {#show_block('b5',0,'','sidebar_top3 b_box')#}
    </div>
    <!-- sidebar -->

</div><!--body-->


<script>
    (function($){
        $.fn.imgIframeUpload = function(settings) {

            var form;
            var iframe;
            var	self = this;
            var	selfId = self.attr('id');
            var	opts = {
                action: "{#$selfurl#}?action=ajax_uploadAvatar",
                callback: null
            };
            $.extend(opts, settings);

            form = $('<form method="post" action="' + opts.action + '" enctype="multipart/form-data" target="iframe-upload-' + selfId + '" style="display:none;"><input type="hidden" name="old_temp" /><input type="hidden" name="callback_script" value="' + (opts.callback ? ('parent.' + opts.callback + '($res);') : '') + '" /></form>');
            iframe = $('<iframe name="iframe-upload-' + selfId + '" frameborder="0" style="display:none;" src="about:blank"></iframe>');
            $('body').append(form).append(iframe);

            function fileChange(obj){
                obj.change(function(){
                    var fileInputClone = $(this).clone().val('').hide();
                    $(this).after(fileInputClone).attr('name', 'temp[]').removeAttr('id').appendTo(form);
                    fileInputClone.css('display', 'inline');
                    fileChange(fileInputClone);
                    form.submit();
                    $(this).remove();
                });
            }

            fileChange(self);

        }
    })(jQuery);

    function upAvatarCallback(res){
        if(res){
            if(res[0].code == 1){
                $('#avatar').val(res[0].thumb);
                $('#avatar_thumbnail').html('<img src="' + res[0].thumb + '" width=84 height="84" />');
                check_register_avatar();
            }else{
                $("#avatar_file_tip").addClass("tip").show();
                $("#avatar_file_tip_text").html(res[0].msg);
            }
        }
        $(window).focus();
    }
    var usename_ok,password_ok,cpassword_ok,salutation_ok,email_ok,phone_ok,idcard_ok,birthday_ok,captcha_ok;
    $(document).ready(function(){

        $('#avatar_file').imgIframeUpload({
            callback: 'upAvatarCallback'
        });
    });
    function check_register_avatar(){
        var rt = 0;
        if($('#avatar').val().length==0){
            $("#avatar_file_tip").addClass("tip").show();
            $("#avatar_file_tip_text").html('{#$HAS_INVITE_PIC#}')
        }else{
            $("#avatar_file_tip").removeClass("tip").hide();
            rt =  1;
        }
        return rt;
    }
    function submit_form(){

        var ck = {

            'homepage'			:["{#$HAS_HOMEPAGE#}",3],
            'brand[]'			:["{#$HAS_BRAND#}",2],
            'question[]'		:["{#$HAS_QUESTION#}",2],
            'interest[]'		:["{#$HAS_INTEREST#}",2],
            'avatar'			:["{#$HAS_INVITE_PIC#}",3]


        };
        var ck_ok =1;
        $.each(ck,function(i,n){
            switch(n[1]){
                case 1:
                    var o = $('#'+i);
                    if(o.val()==0){
                        //alert(n[0]);
                        ck_ok = 0;
                        o.focus();
                        $('#'+i+'_err').show();
                        return false;
                    }
                    break;
                case 2:
                    if(!check_checkbox(i)){
                        //alert(n[0]);
                        ck_ok = 0;
                        $('[name='+i+']').eq(0).focus();

                        var l=i.length;
                        $('#'+i.substr(0,l-2)+'_err').show();
                        return false;
                    }
                    break;
                case 3:
                    var o = $('#'+i);
                    if($.trim(o.val()).length==0){
                        //alert(n[0]);
                        ck_ok = 0;
                        o.focus();
                        $('#'+i+'_err').show();
                        if(i=='avatar'){
                            check_register_avatar();
                        }
                        return false;
                    }
                    break;
            }
        });
        if(ck_ok){
            $("#register_form").submit();
        }
    }


    function check_checkbox(name) {
        var falg = 0;
        $("input[name='"+name+"']:checkbox").each(function () {
            if ($(this).attr("checked")) {
                falg += 1;
            }
        });
        if (falg > 0) {
            return true;
        } else {
            return false;
        }
    }
    function reset_brand_checkbox(name){
        $("input[name='"+name+"']:checkbox").attr("checked",false);
    }

    function toggle_brand_checkbox(this_obj){
        if($(this_obj).parent().next('dl').css("display")=="none"){
            $(this_obj).parent().next('dl').show();
            $(this_obj).attr("class","few");
        }else{
            $(this_obj).parent().next('dl').hide();
            $(this_obj).attr("class","few plus");
        }
    }
</script>

<!--hidden-->
<div class="mbox" id="brand_form" style="visibility:hidden;" >
    <a class="btn_close" href="###" onclick="selectcheckbox('brand_a','brand_form');"></a>
    <div class="hd">
        <h2 class="hd_title">請選擇您最喜愛的美容品牌</h2>
    </div>

    <div class="scrollBox">
        {#foreach from=$brand_key item=value key=key name=brand_key#}
        <div class="tit">
            <a href="###" class="few" onclick="toggle_brand_checkbox(this)"></a>{#$value#}
        </div>
        <dl>{#foreach from=$layout['brand'][$value] item=value1 key=key1#}
            <dd>
                <input value="{#$key1#}" type="checkbox" name="brand[]"  {#if in_array($key1,$layout.member.brand)#}checked="checked"{#/if#} brand_name="{#$value1#}" brand_name="Aesop">
                       {#$value1#}
            </dd>
            {#/foreach#}
        </dl>
        {#/foreach#}<div class="tit"><a href="#" class="few" onclick="toggle_brand_checkbox(this)"></a>其他</div>
        <dl>
            {#foreach from=$SITE_LOOKUP['brand_arr']['其他'] item=value1 key=key1#}
            <dd><input value="{#$key1#}" type="checkbox" name="brand[]"  {#if in_array($key1,$layout.member.brand)#}checked="checked"{#/if#}   brand_name="{#$value1#}">{#$value1#}</dd>
            {#/foreach#}
        </dl>
    </div>
    <div class="ft">
        <a class="btn_s btn_s_p_submit" href="###" onclick="selectcheckbox('brand_a','brand_form');">
            <strong>提交</strong>
        </a>
        <a class="btn_s btn_s_p_clear" href="###" onclick="reset_brand_checkbox('brand[]')">
            <strong>清空</strong>
        </a>
    </div>


</div>
{#include file="footer.php"#}